@import '../../style/mixin.scss';

.myorder {
    min-height : 100vh;
    padding-top: 96px;

    .myorder-main {
        background-color: #fff;
        padding         : 25px;
    }

    .myorder-type {
        @include flex();
        position        : absolute;
        top             : 33px;
        right           : 25px;
        border-radius   : 10px;
        overflow        : hidden;
        background-color: #f5f5f5;
    }

    .type-item {
        @include font(14px, #808080);
        padding: 2px 20px;
        cursor : pointer;
    }

    .type-item-active {
        @extend .type-item;
        background-color: #3F90FA;
        color           : #Fff;
    }

    .pay-icon {
        width : 24px;
        height: 24px;
    }

    .unpaid-btn {
        background-color: #F8B657;
        border          : 0;
    }

    .cancel-btn {
        background-color: #EBEBEB;
        color           : #B3B3B3;
        border          : 0;
    }

    .completed-btn {
        background-color: #BFBFBF;
        border          : 0;
    }

    .order-item {
        padding      : 20px 30px;
        border-bottom: 1px solid #eee;
    }

    .order-no {
        @include font(14px, #808080);

        span {
            @include font(14px, #3f90fa);
        }
    }

    .order-img {
        width       : 69px;
        height      : 68px;
        margin-right: 15px
    }

    .order-num {
        @include font(36px, #F8B657);
        line-height: 49px;
        font-weight: 600;
        margin     : 0;
        margin-left: -5px;
    }

    .order-num-desc {
        @include font(14px, #000);
        margin: 0;
    }

    .order-desc {
        padding-left  : 5%;
        flex-direction: column;
        border-right  : 1px solid #eee;

        p {
            @include font(14px, #808080);
            margin: 12px 0 0;
        }

        span {
            padding-left: 20px;
        }
    }

    .pay-icon {
        width : 24px;
        height: 24px;
    }

    .order-btn {
        padding-left: 5%;
    }

    .bind-new {
        @include font(14px, #F55152);
        text-decoration: underline;
        margin-left    : 20px;
    }
}

@media screen and (max-width:900px) {
    .myorder {
        .order-desc {
            padding-left: 0;
        }
    }
}